import styled from "styled-components";
import { px2rem } from "../../assets/global-style";

export const Wrapper = styled.div`
    padding: 0.3rem 0.6rem 0;
    margin-bottom: 5rem;
    height: auto;
    .container {
        width: 100%;
        margin-bottom: ${px2rem(25)};
        img {
            border-radius: 8px;
            width: ${px2rem(351)};
            height: ${px2rem(188)};
        }
        .title {
            margin-top: ${px2rem(10)};
            font-size: ${px2rem(15)};
            font-weight: bold;
            color: #3c3c3c;
        }
        .footer {
            display: flex;
            line-height: ${px2rem(20)};
            .author {
                display: flex;
                padding-top: ${px2rem(10)};
                img {
                    width: ${px2rem(20)};
                    height: ${px2rem(20)};
                    border-radius: ${px2rem(10)};
                }
                .name {
                    width: ${px2rem(80)};
                    padding-left: ${px2rem(6)};
                    font-size: ${px2rem(14)};
                    color: #b5b5b5;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;                       
                }
                
            }
            .data_use {
                display: flex;
                margin-left: auto;
                padding-top: ${px2rem(10)};               
            }
            .data_like {
                margin-left: 0;
                color: black;
            }
            .data_like_container, .data_watch {
                display: flex;
                text-align: center;
                span, i {
                    color: #b5b5b5;
                    font-weight: bold;
                    height: ${px2rem(20)};
                    line-height: ${px2rem(20)};
                    font-size: ${px2rem(14)};
                    padding-left: ${px2rem(4)};
                }
              
            }
            .data_watch, i{     
                margin-left: ${px2rem(8)};
            }       
        }
    }
    
`